let demo1 = require('1.js');
<template>
    <section>
        <!--工具条-->
        <el-row :gutter="20" class="toolbar">
            <el-col :span="11" style="padding-bottom: 0;">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button @click="reloadPage">刷新</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" :disabled="blacklist.length===0" @click="setBlacklist">设置黑名单</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="blacklist.length===0" @click="cancelSetBlacklist">取消黑名单</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="warning" :disabled="blacklist.length===0" @click="deleteFans">删除</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="13" style="padding-bottom: 0;text-align: right;">
                <el-form :inline="true" >
                    <el-form-item>
                        <el-input placeholder="可搜索昵称/姓名/手机号/ID"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">搜索</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary">其他</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <!--        筛选区域-->
        <el-select v-model="attention" placeholder="关注" @change="selectAttention">
            <el-option
                    v-for="item in attentions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="attention" placeholder="会员区域" @change="selectAttention">
            <el-option
                    v-for="item in attentions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="attention" placeholder="黑名单" @change="selectAttention">
            <el-option
                    v-for="item in attentions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="attention" placeholder="注册时间" @change="selectAttention">
            <el-option
                    v-for="item in attentions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>

        <!--列表-->
        <el-table
                stripe
                ref="multipleTable"
                :data="MemberList"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="粉丝"
                    width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" alt="" class="fan-head">
                    <span>{{scope.row.nickname}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="会员信息"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="城市"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="注册时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="balance"
                    label="余额"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    label="成交">
                <template slot-scope="scope">
                    <span class="order">订单: 0</span>
                    <span class="money">金额: 0</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="关注/黑名单">
                <template slot-scope="scope">
                    <span :class="[scope.row.follow===1 ? 'follow' : 'un-follow']">{{scope.row.follow===1 ? '已关注' : '未关注'}}</span>
                    <span :class="[scope.row.isblack===1 ? 'un-is-black' : 'is-black']">{{scope.row.isblack===1 ? '黑名单' : '正常'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-document" size="mini" @click="detail(scope.row)" title="会员详情"></el-button>
                        <el-button type="info" icon="el-icon-s-order" size="mini" @click="order(scope.row)" title="会员订单"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteMember(scope.row)" title="删除会员"></el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-col :span="24" class="toolbar">
            <!--            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
            <!--                           :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">-->
            <!--            </el-pagination>-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
            </el-pagination>
        </el-col>

        <!--        这是会员详情的弹出框 -->
        <el-dialog
                title="会员详情"
                :visible.sync="detailDialogVisible"
                width="80%"
                center
                :before-close="handleClose">
            <el-tabs type="border-card">
                <el-tab-pane label="基本信息">
                    <div class="dialog-fans">
                        <strong>粉丝</strong>
                        <img :src="oneDetail.avatar" alt="" style="width: 50px;height: 50px;">
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>OPENID</strong>
                        <span>{{oneDetail.openid}}</span>
                    </div>
                    <div class="dialog-fans" style="">
                        <strong>宝宝姓名</strong>
                        <el-input v-model="oneDetail.babyname" style="width: 40%;"></el-input>
                    </div>
                    <div class="dialog-fans">
                        <strong>出生日期</strong>
                        <el-date-picker
                                v-model="oneDetail.birthday"
                                type="date">
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="dialog-fans">
                        <strong>联系电话</strong>
                        <el-input v-model="oneDetail.mobile" style="width: 40%;"></el-input>
                        <!--                        <span>{{oneDetail.mobile}}</span>-->
                    </div>
                    <div class="dialog-fans">
                        <strong>所在城市</strong>
                        <!--                        <span>{{oneDetail.province + oneDetail.city}}</span>-->
                        <el-select v-model="city" placeholder="请选择省份">
                            <el-option
                                    v-for="item in citys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="city" placeholder="请选择城市">
                            <el-option
                                    v-for="item in citys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="city" placeholder="请选择区域">
                            <el-option
                                    v-for="item in citys"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <!--                    <div class="dialog-fans">-->
                    <!--                        <strong>所在中心</strong>-->
                    <!--                        <span>{{oneDetail.area}}</span>-->
                    <!--                    </div>-->
                    <div class="dialog-fans">
                        <strong>是否会员</strong>
                        <span>{{oneDetail.openid}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>余额</strong>
                        <span>{{oneDetail.balance}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>注册时间</strong>
                        <span>{{oneDetail.create_time}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>关注状态</strong>
                        <span style="display: inline-block;background-color: #409EFF;border-radius: 3px;color: #fff;padding: 2px 3px;">{{oneDetail.follow===0 ? '未关注' : '已关注'}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong>黑名单</strong>
                        <!--                        <span>{{oneDetail.openid}}</span>-->
                        <!--                        + '' 转为字符串格式-->
                        <el-switch
                                v-model="isOrBlacklist"
                                active-text="是"
                                inactive-text="否"
                                @change="switchEvent">
                        </el-switch>
                        <!--                        <el-radio v-model="oneDetail.isblack + ''" label=1>是</el-radio>-->
                        <!--                        <el-radio v-model="oneDetail.isblack + ''" label=0>否</el-radio>-->
                        <span>设置黑名单后，此会员无法访问商城</span>
                    </div>
                    <!--                    <div class="dialog-fans">-->
                    <!--                        <strong>备注</strong>-->
                    <!--                        <el-input type="textarea" v-model="oneDetail.openid" style="width: 50%;"></el-input>-->
                    <!--                    </div>-->
                    <div style="display: flex;justify-content: center;margin-top: 10px">
                        <el-button type="primary" @click="submitInfo">提交</el-button>
                        <el-button @click="detailDialogVisible = false">返回列表</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="交易信息">
                    <div class="dialog-fans">
                        <strong style="width: 142px;">成交订单数</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong style="width: 142px;">成交金额</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div class="dialog-fans">
                        <strong style="width: 142px;">最后一次成交时间</strong>
                        <span>{{oneDetail.nickname}}</span>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: 10px">
                        <!--                        <el-button type="primary">提交</el-button>-->
                        <el-button @click="detailDialogVisible = false">返回列表</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="分销商信息">分销商信息</el-tab-pane>
                <el-tab-pane label="社区信息">社区信息</el-tab-pane>
            </el-tabs>
            <!--            <span slot="footer" class="dialog-footer">-->
            <!--                <el-button @click="detailDialogVisible = false">取 消</el-button>-->
            <!--                <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>-->
            <!--            </span>-->
        </el-dialog>

        <!--        这是会员订单的弹出框 -->
        <el-dialog title="订单管理" :visible.sync="outerVisible" width="70%" center :close-on-click-modal="false">
            <div style="width: 100%;border-bottom: 1px solid #999;padding-bottom: 5px;">订单数: 9 订单金额: 738.00</div>
            <div style="margin-top: 10px;display: flex;margin-bottom: 10px;">
                <!--                <el-button @click="reloadPage">刷新</el-button>-->
                <el-select v-model="paymentVal" placeholder="支付方式" @change="selectPayment">
                    <el-option
                            v-for="item in payment"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="selectTime" placeholder="不按时间" style="width: 10%" @change="selectTimeDialogText">
                    <el-option
                            v-for="item in selectTimes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                        v-model="dialogTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="selectDialogTimeNumber">
                </el-date-picker>
                <el-select v-model="memberId" placeholder="会员编号" style="width: 10%" @change="selectMemberId">
                    <el-option
                            v-for="item in memberIds"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="dialogInput" placeholder="请输入内容" style="width: 20%"></el-input>
                <el-button type="primary">搜索</el-button>
                <el-button type="primary" plain>导出</el-button>
            </div>
            <el-table
                    :data="tableData"
                    height="450"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="订单编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="活动"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="单价/数量	"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="会员"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="支付方式"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="价格"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="下单时间"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="查看详情"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click="lookDetail(scope.$index, scope.row)">查看详情</el-button>
                    </template>
                    <!--                    <span class="lookDetail" @cell-click="lookDetail">查看详情</span>-->
                </el-table-column>
                <el-table-column
                        label="关闭订单"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                type="danger"
                                @click="shutDetail(scope.$index, scope.row)">关闭订单</el-button>
                    </template>
                    <!--                    <span class="lookDetail">关闭订单</span>-->
                </el-table-column>
            </el-table>
            <el-dialog
                    width="70%"
                    title="内层 Dialog"
                    :visible.sync="innerVisible"
                    append-to-body>
                <el-steps :active="active" align-center>
                    <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
                </el-steps>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">取 消</el-button>
                <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    // import { getMemberList } from '../../api/api';
    import { getMemberList,SetOrCancelBlacklist,editMemberInfo } from '../../api/memberManagementAPI'
    import { waitPayment } from '../../api/order'
    export default {
        name: "member-management",
        data () {
            return {
                totalCount: 0, // 总共多少条
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
                babyBirthday: '', //宝宝生日
                oneDetail: {}, // 保存单个用户的信息
                detailDialogVisible: false, // 单个会员详情开关
                MemberList: [], // 会员列表
                attentions: [
                    {
                        value: '1',
                        label: '已关注'
                    },
                    {
                        value: '2',
                        label: '未关注'
                    }
                ],
                attention: '', // 关注的值
                blacklist: [], // 设置黑名单
                isOrBlacklist: false, // 当前这个用户是否是黑名单
                outerVisible: false, // 这下面2个属性是控制会员订单的dialog
                innerVisible: false,
                payment: [
                    {
                        value: '1',
                        label: '未支付'
                    },
                    {
                        value: '2',
                        label: '余额支付'
                    },
                    {
                        value: '3',
                        label: '后台付款'
                    },
                    {
                        value: '4',
                        label: '在线支付'
                    },
                    {
                        value: '5',
                        label: '微信支付'
                    },
                    {
                        value: '6',
                        label: '支付宝支付'
                    },
                    {
                        value: '7',
                        label: '银联支付'
                    },
                    {
                        value: '8',
                        label: '货到付款'
                    },
                    {
                        value: '9',
                        label: '微信银联支付'
                    }
                ], // 支付方式选择数据
                paymentVal: '', // 支付方式绑定的值
                selectTimes: [
                    {
                        value: '1',
                        label: '报名时间'
                    },
                    {
                        value: '2',
                        label: '付款时间'
                    },
                    {
                        value: '3',
                        label: '完成时间'
                    }
                ], // 不按时间
                selectTime: '', // 不按时间绑定的值
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }
                    ]
                }, // 会员订单里面的时间选择快捷数据
                dialogTime: [], // 开始时间-结束时间
                memberId: '', // 会员编号绑定的值
                memberIds: [
                    {
                        value: '1',
                        label: '订单号'
                    },
                    {
                        value: '2',
                        label: '会员信息'
                    },
                    {
                        value: '3',
                        label: '活动名称'
                    },
                    {
                        value: '4',
                        label: '核销员'
                    },
                    {
                        value: '5',
                        label: '核销门店'
                    },
                    {
                        value: '6',
                        label: '核销码'
                    },
                    {
                        value: '7',
                        label: '会员编号'
                    },
                    {
                        value: '8',
                        label: '商户名称'
                    },
                ], // 会员编号选择的数据
                dialogInput: '', // 会员订单里面输入框的内容
                tableData: [
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        id: 222,
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-08',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-06',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-07',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }
                ], // 会员订单里面表单数据
                citys: [
                    {
                        value: 1,
                        label: '北京'
                    },
                    {
                        value: 2,
                        label: '上海'
                    },
                ],  // 地址 三级联动
                city: '', // 绑定的地址
                active: 2, // 会员详情步骤条
            }
        },
        computed: {
            // toStringRadio() {
            //     return this.oneDetail.isblack + ''
            // }
        },
        created() {
            this._getMemberList(); // 会员列表
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                // 改变每页显示的条数
                this.pageSize = val;
                this._getMemberList()
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this._getMemberList()
            },
            // 关注和未关注事件
            selectAttention() {
                console.log(this.attention)
            },
            // 获取会员列表
            _getMemberList() {
                let params = {
                    p: this.currentPage,
                    length: this.pageSize,
                    keyword: ''
                };
                console.log(this.pageSize)
                getMemberList(params).then(res => {
                    console.log(res.data.member,'会员列表')
                    this.MemberList = res.data.member;
                    console.log(res.data.total)
                    this.totalCount = res.data.total;
                    // this.MemberList = res.data.data.member;
                    // console.log(res.data.data.total)
                    // this.totalCount = res.data.data.total;
                    // console.log(res.data.data.member,'会员列表')
                })

            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            // 打钩的事件
            handleSelectionChange(val) {
                this.blacklist = val;
                console.log(val)
            },

            // 刷新页面
            reloadPage() {
                // window.location.reload(); // 刷新当前页面
                location.reload();
            },

            // 批量设置黑名单
            setBlacklist() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认设置选中的粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        isblack: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '设置黑名单成功'
                        });
                        this._getMemberList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },

            // 批量取消黑名单
            cancelSetBlacklist() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认取消吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        isblack: 0
                    };
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '取消黑名单成功'
                        });
                        this._getMemberList();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },

            // 删除粉丝
            deleteFans() {
                let ids = this.blacklist.map(item => item.id)
                console.log(ids)
                this.$confirm('确认删除选中的粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: ids,
                        delete: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '网络错误，请重试'
                    });
                });
            },

            // 会员详情
            detail(row) {
                console.log(row)
                row.isblack===1 ? this.isOrBlacklist = true: this.isOrBlacklist = false
                this.oneDetail = row
                this.detailDialogVisible = true
            },
            // 会员详情 弹出框的关闭按钮
            handleClose(done) {
                // this.$confirm('确认关闭？')
                //     .then(_ => {
                //         done();
                //     })
                //     .catch(_ => {});
                this.detailDialogVisible = false
            },
            // 会员订单
            order(row) {
                console.log(row)
                this.outerVisible = true
            },
            // 删除会员
            deleteMember(row) {
                console.log(row.id)
                // let ids = this.blacklist.map(item => item.id)
                // console.log(ids)
                this.$confirm('确认删除该粉丝吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {
                        ids: row.id,
                        delete: 1
                    }
                    console.log(data)
                    SetOrCancelBlacklist(data).then(res => {
                        this.$message({
                            type: 'success ',
                            message: '删除成功'
                        });
                    })
                }).catch(() => {

                });
            },

            // 基本信息修改
            submitInfo() {
                let data = {
                    id: this.oneDetail.id,
                    mobile: this.oneDetail.mobile,
                    babyname: this.oneDetail.babyname,
                    birthday: this.$util.standardTimeToDate(this.oneDetail.birthday),
                    isblack: this.isOrBlacklist ? 1 : 0
                }
                console.log(data)
                editMemberInfo(data).then(res => {
                    this.$message({
                        type: 'success ',
                        message: '提交成功'
                    });
                    this._getMemberList()
                    // this.detailDialogVisible = false
                })
            },

            // 支付方式选择的事件
            selectPayment() {
                console.log(this.paymentVal)
            },

            // 不按时间选择的事件
            selectTimeDialogText() {
                console.log(this.selectTime)
            },

            // 不按时间选择的时间
            selectDialogTimeNumber() {
                console.log(this.dialogTime[0]) // 得到的是中国标准时间 记得转换 开始时间
                console.log(this.dialogTime[1]) // 得到的是中国标准时间 记得转换 结束时间
            },

            // 选择会员编号
            selectMemberId() {
                console.log(this.memberId)
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            switchEvent(val) {
                console.log(val)
            },

            // 查看详情
            lookDetail(index, row) {
                // console.log(row)
                // console.log(column)
                // console.log(event)
                // console.log(cell)
                console.log(index)
                console.log(row)
            },

            // 关闭订单
            shutDetail(index, row) {
                console.log(index)
                console.log(row)
            },


        }
    }
</script>

<style scoped>
    .fan-head {
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
    .order,.money,.follow,.is-black,.un-follow,.un-is-black {
        display: block;
        color: #fff;
        border-radius: 3px;
        padding: 0 3px;
    }
    .money,.un-is-black{
        background-color: rgb(26,179,148);
    }
    .order {
        background-color: rgb(237,85,101);
        margin-right: 3px;
    }
    .follow {
        background-color: #409EFF;
        margin-right: 3px;
    }
    .un-follow,.un-is-black {
        background-color: #909399;
        margin-right: 3px;
    }
    .is-black {
        background-color: rgb(26,179,148);
    }
    .dialog-fans strong {
        display: inline-block;
        width: 78px;
        text-align: right;
        font-size: 16px;
        margin-right: 50px;
        margin-bottom: 20px;
    }
    .lookDetail:hover {
        color: #409EFF;
        cursor: pointer;
    }
</style>